import React, { FC } from "react"
import { Card, Empty, Spin, Table } from "antd"
import { useSearchParams } from "react-router-dom"
import { LIST_PAGE_PARAM_KEY, LIST_PAGE_SIZE, LIST_PAGE_SIZE_PARAM_KEY } from "@/constant"
import { getBlankScreenService } from "@/service/blank-screen"
import { useRequest } from "ahooks"
import ListPage from "@/components/ListPage"
import dayjs from "dayjs"

const WhiteScreenList: FC = () => {
    const [searchParams] = useSearchParams()
    // 发送网络请求
    async function getBlankScreenData() {
        // 获取page关键词
        const page = parseInt(searchParams.get(LIST_PAGE_PARAM_KEY) || "") || 1
        // 获取分页大小关键词
        const pageSize = parseInt(searchParams.get(LIST_PAGE_SIZE_PARAM_KEY) || "") || LIST_PAGE_SIZE
        const data = await getBlankScreenService({ page, pageSize })
        return data
    }

    const { loading, data = {} } = useRequest(getBlankScreenData, {
        refreshDeps: [searchParams]
    })
    const { count = 0, list = [] } = data

    // 表格列配置
    const columns = [
        {
            title: "页面URL",
            dataIndex: "pageUrl",
            key: "pageUrl"
        },
        {
            title: "时间",
            dataIndex: "time",
            key: "time",
            render: (value: number) => dayjs(value).format("YYYY-MM-DD HH:mm:ss")
        },
        {
            title: "空白点个数",
            dataIndex: "emptyPoints",
            key: "emptyPoints"
        },
        {
            title: "白屏尺寸",
            dataIndex: "viewport",
            key: "viewport",
            render: (value: { width: number; height: number }) => value.width + "*" + value.height
        },
        {
            title: "白屏原因",
            dataIndex: "message",
            key: "message"
        }
    ]

    return (
        <Card title="页面白屏数据" variant="borderless">
            <Spin spinning={loading}>
                {!loading && list.length === 0 && <Empty description="暂无数据" />}
                {list.length > 0 && (
                    <>
                        <Table dataSource={list} columns={columns} rowKey="time" />
                        <div style={{ marginTop: "20px" }}>
                            <ListPage total={count} />
                        </div>
                    </>
                )}
            </Spin>
        </Card>
    )
}

export default WhiteScreenList
